<template>
  <div class="dashboard">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <div class="welcome-text">
          <h1>欢迎回来！</h1>
          <p>今天是 {{ getCurrentDate() }}，{{ getGreeting() }}</p>
          <div class="weather-info">
            <el-icon><Sunny /></el-icon>
            <span>晴朗 · 22°C</span>
          </div>
        </div>
        <div class="banner-actions">
          <el-button type="primary" size="large" :icon="Plus" @click="goToActivityManage">
            创建新活动
          </el-button>
          <el-button type="success" size="large" :icon="DataAnalysis" @click="scrollToCharts">
            查看数据分析
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card activity-card" shadow="hover" @click="goToActivityManage">
            <div class="stats-content">
              <div class="stats-icon activity-icon">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number" :class="{ 'animate-number': animateNumbers }">
                  {{ animatedStats.totalActivities }}
                </div>
                <div class="stats-label">总活动数</div>
                <div class="stats-trend">
                  <el-icon><TrendCharts /></el-icon>
                  <span class="trend-text">+{{ monthlyTrends.activityGrowthRate }}% 本月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card student-card" shadow="hover" @click="goToStudentManage">
            <div class="stats-content">
              <div class="stats-icon student-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number" :class="{ 'animate-number': animateNumbers }">
                  {{ animatedStats.totalStudents }}
                </div>
                <div class="stats-label">学生总数</div>
                <div class="stats-trend">
                  <el-icon><TrendCharts /></el-icon>
                  <span class="trend-text">+{{ monthlyTrends.studentGrowthRate }}% 本月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card employee-card" shadow="hover" @click="goToEmployeeManage">
            <div class="stats-content">
              <div class="stats-icon employee-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number" :class="{ 'animate-number': animateNumbers }">
                  {{ animatedStats.totalEmployees }}
                </div>
                <div class="stats-label">员工总数</div>
                <div class="stats-trend">
                  <el-icon><TrendCharts /></el-icon>
                  <span class="trend-text">+{{ (monthlyTrends.activityGrowthRate * 0.3).toFixed(1) }}% 本月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card enrollment-card" shadow="hover" @click="goToActivityCheck">
            <div class="stats-content">
              <div class="stats-icon enrollment-icon">
                <el-icon><Promotion /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number" :class="{ 'animate-number': animateNumbers }">
                  {{ animatedStats.totalEnrollments }}
                </div>
                <div class="stats-label">报名总数</div>
                <div class="stats-trend">
                  <el-icon><TrendCharts /></el-icon>
                  <span class="trend-text">+{{ monthlyTrends.enrollmentGrowthRate }}% 本月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快速操作和待办事项 -->
    <el-row :gutter="20" class="action-todo-section">
      <el-col :xs="24" :lg="14">
        <el-card class="action-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
              <el-tag type="info" size="small">{{ quickActions.length }} 个功能</el-tag>
            </div>
          </template>
          <div class="action-grid">
            <div 
              v-for="action in quickActions" 
              :key="action.key"
              class="action-item"
              @click="action.handler"
            >
              <div class="action-icon" :class="action.iconClass">
                <el-icon>
                  <component :is="action.icon" />
                </el-icon>
              </div>
              <div class="action-content">
                <div class="action-title">{{ action.title }}</div>
                <div class="action-desc">{{ action.desc }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="10">
        <el-card class="todo-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-badge :value="todoList.filter(item => !item.completed).length" class="todo-badge">
                <el-button type="text" size="small">全部</el-button>
              </el-badge>
            </div>
          </template>
          <div class="todo-list">
            <div v-if="todoList.length === 0" class="empty-todo">
              <el-empty description="暂无待办事项" :image-size="80" />
            </div>
            <div v-else>
              <div 
                v-for="todo in todoList.slice(0, 5)" 
                :key="todo.id"
                class="todo-item"
                :class="{ 'completed': todo.completed }"
              >
                <el-checkbox 
                  v-model="todo.completed" 
                  @change="toggleTodo(todo)"
                  class="todo-checkbox"
                />
                <div class="todo-content">
                  <div class="todo-title">{{ todo.title }}</div>
                  <div class="todo-time">{{ todo.time }}</div>
                </div>
                <el-tag 
                  :type="todo.priority === 'high' ? 'danger' : todo.priority === 'medium' ? 'warning' : 'info'"
                  size="small"
                >
                  {{ todo.priority === 'high' ? '紧急' : todo.priority === 'medium' ? '重要' : '普通' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动和系统通知 -->
    <el-row :gutter="20" class="activity-notification-section">
      <el-col :xs="24" :lg="16">
        <el-card class="recent-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <div class="header-actions">
                <el-button type="text" size="small" @click="refreshActivities">
                  <el-icon><Refresh /></el-icon>
                  刷新
                </el-button>
                <el-button type="text" size="small" @click="goToActivityManage">
                  查看全部
                </el-button>
              </div>
            </div>
          </template>
          <div v-loading="loading" class="recent-list">
            <div v-if="recentActivities.length === 0" class="empty-state">
              <el-empty description="暂无最近活动" :image-size="100">
                <el-button type="primary" @click="goToActivityManage">创建第一个活动</el-button>
              </el-empty>
            </div>
            <div v-else>
              <div 
                v-for="activity in recentActivities" 
                :key="activity.id" 
                class="activity-item"
                @click="viewActivityDetail(activity)"
              >
                <div class="activity-avatar">
                  <img v-if="activity.image" :src="activity.image" alt="活动图片" />
                  <div v-else class="default-avatar">
                    <el-icon><Calendar /></el-icon>
                  </div>
                </div>
                <div class="activity-info">
                  <div class="activity-name">{{ activity.aname || activity.name || '未知活动' }}</div>
                  <div class="activity-desc">{{ activity.activityDetail || '暂无描述' }}</div>
                  <div class="activity-meta">
                    <span class="activity-time">{{ formatDate(activity.createTime) }}</span>
                    <el-tag :type="getStatusType(activity.status)" size="small">
                      {{ getStatusText(activity.status) }}
                    </el-tag>
                    <span class="activity-location" v-if="activity.location">
                      <el-icon><Location /></el-icon>
                      {{ activity.location }}
                    </span>
                  </div>
                </div>
                <div class="activity-stats">
                  <div class="stat-item">
                    <span class="stat-number">{{ activity.currentParticipants || 0 }}</span>
                    <span class="stat-label">已报名</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-number">{{ activity.capacity || 0 }}</span>
                    <span class="stat-label">总容量</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="8">
        <el-card class="notification-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统通知</span>
              <el-badge :value="notifications.filter(n => !n.read).length" class="notification-badge">
                <el-button type="text" size="small">标记已读</el-button>
              </el-badge>
            </div>
          </template>
          <div class="notification-list">
            <div v-if="notifications.length === 0" class="empty-notification">
              <el-empty description="暂无通知" :image-size="80" />
            </div>
            <div v-else>
              <div 
                v-for="notification in notifications.slice(0, 6)" 
                :key="notification.id"
                class="notification-item"
                :class="{ 'unread': !notification.read }"
                @click="markAsRead(notification)"
              >
                <div class="notification-icon" :class="notification.type">
                  <el-icon>
                    <component :is="notification.icon" />
                  </el-icon>
                </div>
                <div class="notification-content">
                  <div class="notification-title">{{ notification.title }}</div>
                  <div class="notification-desc">{{ notification.desc }}</div>
                  <div class="notification-time">{{ formatTime(notification.time) }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统概览 -->
    <div class="system-overview">
      <el-row :gutter="20">
        <el-col :xs="24" :md="12">
          <el-card class="overview-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>活动状态分布</span>
              </div>
            </template>
            <div class="status-distribution">
              <div class="status-item">
                <div class="status-bar">
                  <div class="status-label">未开始</div>
                  <div class="status-progress">
                    <div class="progress-bar" :style="{ width: '25%', backgroundColor: '#909399' }"></div>
                  </div>
                  <div class="status-count">{{ statusStats.notStarted }}</div>
                </div>
              </div>
              <div class="status-item">
                <div class="status-bar">
                  <div class="status-label">报名中</div>
                  <div class="status-progress">
                    <div class="progress-bar" :style="{ width: '40%', backgroundColor: '#67c23a' }"></div>
                  </div>
                  <div class="status-count">{{ statusStats.enrolling }}</div>
                </div>
              </div>
              <div class="status-item">
                <div class="status-bar">
                  <div class="status-label">进行中</div>
                  <div class="status-progress">
                    <div class="progress-bar" :style="{ width: '15%', backgroundColor: '#e6a23c' }"></div>
                  </div>
                  <div class="status-count">{{ statusStats.ongoing }}</div>
                </div>
              </div>
              <div class="status-item">
                <div class="status-bar">
                  <div class="status-label">已结束</div>
                  <div class="status-progress">
                    <div class="progress-bar" :style="{ width: '20%', backgroundColor: '#f56c6c' }"></div>
                  </div>
                  <div class="status-count">{{ statusStats.ended }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :md="12">
          <el-card class="overview-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>本月数据趋势</span>
              </div>
            </template>
            <div class="trend-data">
              <div class="trend-item">
                <div class="trend-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <div class="trend-info">
                  <div class="trend-title">新增活动</div>
                  <div class="trend-value">+{{ monthlyTrends.newActivities }} <span class="trend-percent">↗ {{ monthlyTrends.activityGrowthRate }}%</span></div>
                </div>
              </div>
              <div class="trend-item">
                <div class="trend-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="trend-info">
                  <div class="trend-title">新增学生</div>
                  <div class="trend-value">+{{ monthlyTrends.newStudents }} <span class="trend-percent">↗ {{ monthlyTrends.studentGrowthRate }}%</span></div>
                </div>
              </div>
              <div class="trend-item">
                <div class="trend-icon">
                  <el-icon><Promotion /></el-icon>
                </div>
                <div class="trend-info">
                  <div class="trend-title">活动报名</div>
                  <div class="trend-value">+{{ monthlyTrends.newEnrollments }} <span class="trend-percent">↗ {{ monthlyTrends.enrollmentGrowthRate }}%</span></div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 系统公告 -->
    <div class="system-announcements">
      <el-card class="announcement-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
            <el-button type="text" size="small">管理公告</el-button>
          </div>
        </template>
        <div class="announcement-list">
          <div class="announcement-item">
            <div class="announcement-icon">
              <el-icon><Bell /></el-icon>
            </div>
            <div class="announcement-content">
              <div class="announcement-title">系统维护通知</div>
              <div class="announcement-desc">系统将于本周六凌晨2:00-4:00进行例行维护，期间可能影响正常使用。</div>
              <div class="announcement-time">2024-01-15 14:30</div>
            </div>
          </div>
          <div class="announcement-item">
            <div class="announcement-icon">
              <el-icon><InfoFilled /></el-icon>
            </div>
            <div class="announcement-content">
              <div class="announcement-title">新功能上线</div>
              <div class="announcement-desc">员工管理模块已上线，支持员工信息的增删改查和头像上传功能。</div>
              <div class="announcement-time">2024-01-12 09:15</div>
            </div>
          </div>
          <div class="announcement-item">
            <div class="announcement-icon">
              <el-icon><SuccessFilled /></el-icon>
            </div>
            <div class="announcement-content">
              <div class="announcement-title">活动管理优化</div>
              <div class="announcement-desc">活动管理页面进行了界面优化，提升了用户体验和操作效率。</div>
              <div class="announcement-time">2024-01-10 16:45</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据统计图表 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :xs="24" :lg="16">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>活动参与度趋势</span>
                <el-button-group size="small">
                  <el-button :type="chartPeriod === 'week' ? 'primary' : ''" @click="chartPeriod = 'week'">周</el-button>
                  <el-button :type="chartPeriod === 'month' ? 'primary' : ''" @click="chartPeriod = 'month'">月</el-button>
                  <el-button :type="chartPeriod === 'year' ? 'primary' : ''" @click="chartPeriod = 'year'">年</el-button>
                </el-button-group>
              </div>
            </template>
            <div class="chart-placeholder">
              <div class="chart-mock">
                <div class="chart-bars">
                  <div class="bar" style="height: 60%"></div>
                  <div class="bar" style="height: 80%"></div>
                  <div class="bar" style="height: 45%"></div>
                  <div class="bar" style="height: 90%"></div>
                  <div class="bar" style="height: 70%"></div>
                  <div class="bar" style="height: 85%"></div>
                  <div class="bar" style="height: 95%"></div>
                </div>
                <div class="chart-labels">
                  <span>周一</span>
                  <span>周二</span>
                  <span>周三</span>
                  <span>周四</span>
                  <span>周五</span>
                  <span>周六</span>
                  <span>周日</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :lg="8">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>热门活动类型</span>
              </div>
            </template>
            <div class="popular-types">
              <div class="type-item">
                <div class="type-info">
                  <span class="type-name">学术讲座</span>
                  <span class="type-count">32场</span>
                </div>
                <div class="type-progress">
                  <div class="progress-fill" style="width: 85%"></div>
                </div>
              </div>
              <div class="type-item">
                <div class="type-info">
                  <span class="type-name">文体活动</span>
                  <span class="type-count">28场</span>
                </div>
                <div class="type-progress">
                  <div class="progress-fill" style="width: 70%"></div>
                </div>
              </div>
              <div class="type-item">
                <div class="type-info">
                  <span class="type-name">社会实践</span>
                  <span class="type-count">24场</span>
                </div>
                <div class="type-progress">
                  <div class="progress-fill" style="width: 60%"></div>
                </div>
              </div>
              <div class="type-item">
                <div class="type-info">
                  <span class="type-name">志愿服务</span>
                  <span class="type-count">18场</span>
                </div>
                <div class="type-progress">
                  <div class="progress-fill" style="width: 45%"></div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Calendar,
  User,
  UserFilled,
  Promotion,
  Plus,
  Setting,
  Bell,
  InfoFilled,
  SuccessFilled,
  Sunny,
  DataAnalysis,
  TrendCharts,
  Refresh,
  Location,
  DocumentChecked,
  ChatDotRound,
  Warning,
  SuccessFilled as Success
} from '@element-plus/icons-vue'
import { 
  queryActivityList, 
  getDashboardStats, 
  getActivityStatusDistribution, 
  getMonthlyTrends 
} from '@/api/school'

const router = useRouter()
const loading = ref(false)
const animateNumbers = ref(false)

// 统计数据
const stats = reactive({
  totalActivities: 0,
  totalStudents: 0,
  totalEmployees: 0,
  totalEnrollments: 0
})

// 动画统计数据
const animatedStats = reactive({
  totalActivities: 0,
  totalStudents: 0,
  totalEmployees: 0,
  totalEnrollments: 0
})

// 最近活动
const recentActivities = ref([])

// 图表周期
const chartPeriod = ref('week')

// 活动状态统计
const statusStats = reactive({
  notStarted: 0,
  enrolling: 0,
  ongoing: 0,
  ended: 0,
  cancelled: 0
})

// 快速操作
const quickActions = ref([
  {
    key: 'activity',
    title: '活动管理',
    desc: '创建和管理学校活动',
    icon: Calendar,
    iconClass: 'activity-action',
    handler: () => router.push('/school/activity')
  },
  {
    key: 'employee',
    title: '员工管理',
    desc: '管理员工信息和权限',
    icon: UserFilled,
    iconClass: 'employee-action',
    handler: () => router.push('/school/employee')
  },
  {
    key: 'student',
    title: '学生管理',
    desc: '查看和管理学生信息',
    icon: User,
    iconClass: 'student-action',
    handler: () => router.push('/school/student')
  },
  {
    key: 'check',
    title: '活动审核',
    desc: '审核学生活动申请',
    icon: DocumentChecked,
    iconClass: 'check-action',
    handler: () => router.push('/school/activity-check')
  },
  {
    key: 'feedback',
    title: '反馈管理',
    desc: '查看用户反馈信息',
    icon: ChatDotRound,
    iconClass: 'feedback-action',
    handler: () => router.push('/school/feedback')
  },
  {
    key: 'info',
    title: '个人信息',
    desc: '管理个人基本信息',
    icon: Setting,
    iconClass: 'info-action',
    handler: () => router.push('/school/info')
  }
])

// 待办事项
const todoList = ref([
  {
    id: 1,
    title: '审核待处理的活动申请',
    time: '今天 14:30',
    priority: 'high',
    completed: false
  },
  {
    id: 2,
    title: '更新员工信息档案',
    time: '明天 09:00',
    priority: 'medium',
    completed: false
  },
  {
    id: 3,
    title: '准备下周活动材料',
    time: '本周五',
    priority: 'medium',
    completed: false
  },
  {
    id: 4,
    title: '回复学生反馈',
    time: '2天前',
    priority: 'low',
    completed: true
  },
  {
    id: 5,
    title: '系统数据备份',
    time: '1周前',
    priority: 'low',
    completed: true
  }
])

// 系统通知
const notifications = ref([
  {
    id: 1,
    title: '新的活动申请',
    desc: '有3个新的活动申请等待审核',
    time: new Date(Date.now() - 30 * 60 * 1000),
    type: 'info',
    icon: Bell,
    read: false
  },
  {
    id: 2,
    title: '系统更新完成',
    desc: '系统已成功更新到最新版本',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000),
    type: 'success',
    icon: Success,
    read: false
  },
  {
    id: 3,
    title: '存储空间警告',
    desc: '系统存储空间使用率已达85%',
    time: new Date(Date.now() - 6 * 60 * 60 * 1000),
    type: 'warning',
    icon: Warning,
    read: true
  },
  {
    id: 4,
    title: '新用户注册',
    desc: '今日新增用户注册15人',
    time: new Date(Date.now() - 24 * 60 * 60 * 1000),
    type: 'info',
    icon: InfoFilled,
    read: true
  }
])

// 获取统计数据
const getStats = async () => {
  try {
    // 获取仪表盘统计数据
    const response = await getDashboardStats()
    if (response && response.code === 0) {
      const data = response.data
      stats.totalActivities = data.totalActivities || 0
      stats.totalStudents = data.totalStudents || 0
      stats.totalEmployees = data.totalEmployees || 0
      stats.totalEnrollments = data.totalEnrollments || 0
    }

    // 启动数字动画
    animateStatsNumbers()
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  }
}

// 数字动画效果
const animateStatsNumbers = () => {
  animateNumbers.value = true
  const duration = 2000 // 2秒动画
  const steps = 60 // 60帧
  const stepDuration = duration / steps

  const animate = (current, target, key) => {
    if (current >= target) {
      animatedStats[key] = target
      return
    }
    
    const increment = Math.ceil((target - current) / 10)
    animatedStats[key] = Math.min(current + increment, target)
    
    setTimeout(() => animate(animatedStats[key], target, key), stepDuration)
  }

  // 启动各个数字的动画
  animate(0, stats.totalActivities, 'totalActivities')
  animate(0, stats.totalStudents, 'totalStudents')
  animate(0, stats.totalEmployees, 'totalEmployees')
  animate(0, stats.totalEnrollments, 'totalEnrollments')
}

// 获取活动状态分布
const getStatusDistribution = async () => {
  try {
    const response = await getActivityStatusDistribution()
    if (response && response.code === 0) {
      const data = response.data
      statusStats.notStarted = data.notStarted || 0
      statusStats.enrolling = data.enrolling || 0
      statusStats.ongoing = data.ongoing || 0
      statusStats.ended = data.ended || 0
      statusStats.cancelled = data.cancelled || 0
    }
  } catch (error) {
    console.error('获取活动状态分布失败:', error)
    ElMessage.error('获取活动状态分布失败')
  }
}

// 月度趋势数据
const monthlyTrends = reactive({
  newActivities: 0,
  newStudents: 0,
  newEnrollments: 0,
  activityGrowthRate: 0,
  studentGrowthRate: 0,
  enrollmentGrowthRate: 0
})

// 获取月度趋势数据
const getMonthlyTrendsData = async () => {
  try {
    const response = await getMonthlyTrends()
    if (response && response.code === 0) {
      const data = response.data
      monthlyTrends.newActivities = data.newActivities || 0
      monthlyTrends.newStudents = data.newStudents || 0
      monthlyTrends.newEnrollments = data.newEnrollments || 0
      monthlyTrends.activityGrowthRate = data.activityGrowthRate || 0
      monthlyTrends.studentGrowthRate = data.studentGrowthRate || 0
      monthlyTrends.enrollmentGrowthRate = data.enrollmentGrowthRate || 0
    }
  } catch (error) {
    console.error('获取月度趋势数据失败:', error)
    ElMessage.error('获取月度趋势数据失败')
  }
}

// 获取最近活动
const getRecentActivities = async () => {
  try {
    loading.value = true
    const response = await queryActivityList({ page: 1, limit: 5 })
    if (response && response.code === 0) {
      recentActivities.value = response.data || []
    }
  } catch (error) {
    console.error('获取最近活动失败:', error)
    ElMessage.error('获取最近活动失败')
  } finally {
    loading.value = false
  }
}

// 快速操作导航
const goToActivityManage = () => {
  router.push('/school/activity')
}

const goToEmployeeManage = () => {
  router.push('/school/employee')
}

const goToStudentManage = () => {
  router.push('/school/student')
}

const goToSchoolInfo = () => {
  router.push('/school/info')
}

const goToActivityCheck = () => {
  router.push('/school/activity-check')
}

// 新增的方法
const getCurrentDate = () => {
  const now = new Date()
  const options = { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric',
    weekday: 'long'
  }
  return now.toLocaleDateString('zh-CN', options)
}

const getGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了，注意休息'
  if (hour < 9) return '早上好！'
  if (hour < 12) return '上午好！'
  if (hour < 14) return '中午好！'
  if (hour < 18) return '下午好！'
  if (hour < 22) return '晚上好！'
  return '夜深了，注意休息'
}

const scrollToCharts = () => {
  const chartsSection = document.querySelector('.charts-section')
  if (chartsSection) {
    chartsSection.scrollIntoView({ behavior: 'smooth' })
  }
}

const refreshActivities = async () => {
  await getRecentActivities()
  ElMessage.success('数据已刷新')
}

const viewActivityDetail = (activity) => {
  // 这里可以添加查看活动详情的逻辑
  ElMessage.info(`查看活动：${activity.aname || activity.name}`)
}

const toggleTodo = (todo) => {
  const status = todo.completed ? '已完成' : '未完成'
  ElMessage.success(`任务状态已更新为：${status}`)
}

const markAsRead = (notification) => {
  if (!notification.read) {
    notification.read = true
    ElMessage.success('通知已标记为已读')
  }
}

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return time.toLocaleDateString('zh-CN')
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    1: 'info',     // 未开始
    2: 'success',  // 报名中
    3: 'warning',  // 进行中
    4: '',         // 已结束
    5: 'danger'    // 已取消
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '未开始',
    2: '报名中',
    3: '进行中',
    4: '已结束',
    5: '已取消'
  }
  return statusMap[status] || '未知'
}

// 页面加载时获取数据
onMounted(() => {
  getStats()
  getStatusDistribution()
  getMonthlyTrendsData()
  getRecentActivities()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: calc(100vh - 60px);
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
}

/* 自定义滚动条样式 */
.dashboard::-webkit-scrollbar {
  width: 8px;
}

.dashboard::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.dashboard::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.dashboard::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 欢迎横幅样式 */
.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 20px;
  margin-bottom: 20px;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.welcome-text h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-text p {
  font-size: 16px;
  margin: 0 0 16px 0;
  opacity: 0.9;
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.8;
}

.banner-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.banner-actions .el-button {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.banner-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}


/* 主要内容区域 */
.stats-container,
.action-todo-section,
.activity-notification-section,
.system-overview,
.system-announcements,
.charts-section {
  padding: 0 20px;
  margin-bottom: 24px;
}

.stats-container {
  background-color: #f5f7fa;
  padding-top: 20px;
}

.stats-card {
  height: 140px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.stats-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stats-card.activity-card:hover {
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
}

.stats-card.student-card:hover {
  box-shadow: 0 12px 40px rgba(240, 147, 251, 0.3);
}

.stats-card.employee-card:hover {
  box-shadow: 0 12px 40px rgba(79, 172, 254, 0.3);
}

.stats-card.enrollment-card:hover {
  box-shadow: 0 12px 40px rgba(67, 233, 123, 0.3);
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.activity-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.student-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.employee-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.enrollment-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.stats-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #67c23a;
}

.trend-text {
  font-weight: 500;
}

.animate-number {
  animation: numberPulse 0.3s ease-in-out;
}

@keyframes numberPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 快速操作和待办事项样式 */
.action-todo-section {
  background-color: #f5f7fa;
}

.action-card {
  border-radius: 16px;
  border: none;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 8px 0;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-item:hover {
  background: white;
  border-color: #e4e7ed;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
  color: white;
}

.action-icon.activity-action {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.employee-action {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.action-icon.student-action {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-icon.check-action {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.action-icon.feedback-action {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.action-icon.info-action {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

/* 待办事项样式 */
.todo-card {
  border-radius: 16px;
  border: none;
}

.todo-list {
  max-height: 300px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
  background-color: #f8f9fa;
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: 8px;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-item.completed .todo-title {
  text-decoration: line-through;
}

.todo-checkbox {
  margin-right: 12px;
}

.todo-content {
  flex: 1;
  margin-right: 12px;
}

.todo-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
  line-height: 1.4;
}

.todo-time {
  font-size: 12px;
  color: #909399;
}

.empty-todo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 最近活动和通知样式 */
.activity-notification-section {
  background-color: #f5f7fa;
}

.recent-card,
.notification-card {
  border-radius: 16px;
  border: none;
}

.recent-card {
  min-height: 400px;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.recent-list {
  min-height: 200px;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background-color: #f8f9fa;
  margin: 0 -20px;
  padding: 16px 20px;
  border-radius: 12px;
  transform: translateX(4px);
}

.activity-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
}

.activity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.activity-info {
  flex: 1;
  margin-right: 16px;
}

.activity-name {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.activity-desc {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.activity-time {
  color: #909399;
  font-size: 12px;
}

.activity-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 12px;
}

.activity-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  min-width: 80px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  line-height: 1;
}

.stat-label {
  font-size: 11px;
  color: #909399;
  margin-top: 2px;
}

/* 通知样式 */
.notification-card {
  min-height: 400px;
}

.notification-list {
  max-height: 350px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: #f8f9fa;
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: 8px;
}

.notification-item.unread {
  background-color: #f0f9ff;
  border-left: 3px solid #409eff;
  padding-left: 13px;
}

.notification-item.unread:hover {
  background-color: #e6f7ff;
  padding-left: 29px;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 16px;
}

.notification-icon.info {
  background-color: #e1f3ff;
  color: #409eff;
}

.notification-icon.success {
  background-color: #f0f9ff;
  color: #67c23a;
}

.notification-icon.warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-desc {
  font-size: 13px;
  color: #606266;
  line-height: 1.4;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 11px;
  color: #909399;
}

.empty-notification {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 系统概览样式 */
.system-overview {
  background-color: #f5f7fa;
  margin-bottom: 24px;
}

.overview-card {
  min-height: 300px;
}

.status-distribution {
  padding: 16px 0;
}

.status-item {
  margin-bottom: 16px;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-label {
  min-width: 60px;
  font-size: 14px;
  color: #606266;
}

.status-progress {
  flex: 1;
  height: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.status-count {
  min-width: 30px;
  text-align: right;
  font-weight: 600;
  color: #303133;
}

.trend-data {
  padding: 16px 0;
}

.trend-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.trend-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 16px;
}

.trend-info {
  flex: 1;
}

.trend-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.trend-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.trend-percent {
  font-size: 12px;
  color: #67c23a;
  margin-left: 8px;
}

/* 系统公告样式 */
.system-announcements {
  margin-bottom: 24px;
}

.announcement-card {
  min-height: 300px;
}

.announcement-list {
  padding: 16px 0;
}

.announcement-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.announcement-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.announcement-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #409eff;
  flex-shrink: 0;
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.announcement-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 8px;
}

.announcement-time {
  font-size: 12px;
  color: #909399;
}

/* 图表样式 */
.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  min-height: 400px;
}

.chart-placeholder {
  padding: 20px 0;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chart-bars {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 200px;
  margin-bottom: 20px;
}

.bar {
  width: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
}

.bar:hover {
  transform: scaleY(1.1);
  opacity: 0.8;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #909399;
}

.popular-types {
  padding: 20px 0;
}

.type-item {
  margin-bottom: 20px;
}

.type-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.type-name {
  font-size: 14px;
  color: #303133;
}

.type-count {
  font-size: 12px;
  color: #909399;
}

.type-progress {
  height: 6px;
  background-color: #f5f7fa;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .action-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .dashboard {
    background: #f5f7fa;
    height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
  }
  
  .welcome-banner {
    padding: 30px 15px;
  }
  
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  
  .welcome-text h1 {
    font-size: 28px;
  }
  
  .banner-actions {
    justify-content: center;
  }
  
  .stats-container,
  .action-todo-section,
  .activity-notification-section,
  .system-overview,
  .system-announcements,
  .charts-section {
    padding: 0 15px;
  }
  
  .stats-card {
    margin-bottom: 16px;
    height: 120px;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .activity-avatar {
    width: 50px;
    height: 50px;
    margin-right: 0;
  }
  
  .activity-info {
    margin-right: 0;
    width: 100%;
  }
  
  .activity-stats {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    min-width: auto;
  }
  
  .activity-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media screen and (max-width: 480px) {
  .welcome-banner {
    padding: 20px 10px;
  }
  
  .welcome-text h1 {
    font-size: 24px;
  }
  
  .banner-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .banner-actions .el-button {
    width: 100%;
  }
  
  .stats-content {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .stats-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .stats-number {
    font-size: 24px;
  }
  
  .action-item {
    padding: 12px;
  }
  
  .action-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .todo-item,
  .notification-item {
    padding: 10px 0;
  }
  
  .activity-item:hover {
    transform: none;
    margin: 0 -10px;
    padding: 16px 10px;
  }
}
</style>
